【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・下巻

清田隆志

2013.01.31

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

前回に引き続き、「Emmet」についてご紹介していきたいと思います。

Emmet Documentationというドキュメントサイトがあるのですが、そちらに「Emmet」の情報が網羅されています。
Emmet Documentationサイトから、ピックアップしてお伝えしようと思います。

アジェンダ

便利な機能：Html編
便利な機能：CSS編
カスタマイズしてみる
おまけ

便利な機能:Html編

基本動作一覧

項目名	説明	Winコマンド	Macコマンド
Expand Abbreviation	コード展開	`Ctrl`+`E` or `Tab`	`Cmd`+`E` or `Tab`
Next Edit Point	次の編集ポイントへ移動	`Ctrl`+`Alt`+`→`	`Ctrl`+`Alt`+`→`
Previous Edit Point	前の編集ポイントへ移動	`Ctrl`+`Alt` + `←`	`Ctrl`+`Alt`+`←`
Match Pair	カーソル位置から親要素を辿る	`Ctrl` + `,`	`Cmd`+`D`
Select Next Item	次のDomへ移動	`Ctrl`+`Shift`+`.`	`Cmd`+`Shift`+`.`
Select Previous Item	前のDomへ移動	`Ctrl`+`Shift`+`,`	`Cmd`+`Shift`+`,`
Toggle Comment	カーソルの位置の要素をコメントアウト	`Ctrl`+`Shift`+`/`	`Cmd`+`/`

ダミーテキストの挿入

loremを記載して、展開するとダミーのテキストを挿入してくれます。

//展開前
p*3>lorem

//展開後
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus consectetur nisi modi alias aspernatur suscipit nihil laborum vero possimus. Nobis velit iste eveniet atque aspernatur! Repellendus illum nulla similique quia.</p>
<p>Magni sapiente dolorum dolorem expedita natus eaque aut nesciunt modi libero aspernatur omnis ex ullam eum? Sunt iste molestiae consequatur quasi non amet laboriosam magni ex a est error quae.</p>
<p>Illo deserunt repellat quibusdam nobis vero ratione dolore sit expedita ea est atque eum quos itaque unde magnam nam enim consectetur laboriosam ut recusandae eos eaque asperiores iure consequuntur soluta.</p>

階層を上がっての展開

ショートカットに^を含めることにより、階層を上ることができます。

//展開前
div+div>h1>span^p

//展開後
<div></div>
<div>
    <h1><span></span></h1>
    <p></p>
</div>

上記、展開前の解説しますと、h1>spanでh1タグの中に、spanタグを入れる指定となっています。現状はh1タグの中まで指定しています、その後^を指定することで、h1と同じ階層に上ることができます。

グループ化の展開

//展開前
div>(header>ul>li*2>a)+footer>p

//展開後
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

タグ属性の展開

最近data属性の便利さに感動しているのですが、data属性や、rowspan属性などの属性の展開する方法です。

//展開前
div[data-foo]
td[rowspan=2 colspan=3 title]

//展開後
<div data-foo=""></div>
<td rowspan="2" colspan="3"></td>

画像の高さと幅を更新（Update Image Size）

Winコマンド：Ctrl+U

Macショートカット：Shift + Ctrl + I

//展開前(カーソルをimgタグ内にいる状態で上記ショートカット)
<img src="demo.jpg" alt="" />

//展開後(画像の高さと幅を入れてくれる。)
<img src="demo.jpg" alt="" width="200" height="150" />

上記ですが、画像のパスが正しく通っていないと動作してくれない模様

便利な機能:CSS編

値の展開

/*展開前*/
w100
w100p
w100e
w100x

width: 100px;
width: 100%;
width: 100em;
width: 100ex;

色のプロパティ展開

/*展開前*/
c#1
c#e0
c#fc0

color: #111;
color: #e0e0e0;
color: #fc0;

特殊なプロパティ展開

/*展開前*/
!
@i
@m
bg:ie

/*展開後*/
!important
@import url();
@media print {}
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png',sizingMethod='crop');

pngのデコード展開

これは驚いた機能のひとつなんですが、png画像をBase64に変換してくれます。

Winショートカット：Ctrl + '

Macショートカット：Shift + Ctrl + D

/*展開前*/
background: url(img/test.png) ;

/*展開後*/
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFM0UxNjA3OTYyNDUxMUUyQjVCMkE4QUIxOEZFMjdEOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFM0UxNjA3QTYyNDUxMUUyQjVCMkE4QUIxOEZFMjdEOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkUzRTE2MDc3NjI0NTExRTJCNUIyQThBQjE4RkUyN0Q4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkUzRTE2MDc4NjI0NTExRTJCNUIyQThBQjE4RkUyN0Q4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+HLD4qwAAADxJREFUeNrszgENAAAIAyDfP/StoRskIG3nnmhpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWn9aq0AAwC9V5WdfMvHHgAAAABJRU5ErkJggg==);

ちょっとカスタマイズ

Emmetの魅力のひとつとして、ショートカットの展開があげられますが、これを自分なりにカスタマイズ（スニペット登録）したいと思ってくると思います。この指定方法を二つご紹介します。

１．Sublime内で編集

まずSublimeのメニューから「Preferences > Package Settings > Emmet > Settings User」で、指定が可能です。

{
    "snippets": {
         "html": {
              "abbreviations": {
                  "ここにhtml用のショートキー": "ここに展開後のソース"
              }
            },
          "css": {
              "snippets": {
                  "ここにcss用のショートキー": "ここに展開後のソース"
              }
          }
    }
}

例えば、以下のように記載したとします。

{
    "snippets": {
         "html": {
              "abbreviations": {
                  "foo": "<div class='foo'>"
              }
            },
          "css": {
              "snippets": {
                  "@mi": "@mixin | {}",
                  "@in": "@include | ;",
                  "@im": "@import '|' ;"
              }
          }
    }
}

htmlの展開

/*展開前*/
foo
/*展開後*/
<div class='foo'></div>

cssの展開

/*展開前*/
@mi
@in
@im

/*展開後*/
@mixin  {}
@include  ;
@import '' ;

最近の開発では、Sass(SCSS)にてCSSを書いているため、上記指定の設定をしていると便利です。

２．パッケージ内のsnippets.jsonを編集

上記のSublime内での編集ですと、チーム内で設定の共有等ができないため、
以下ファイルを修正し、チーム内でのスニペットの共有が可能です。

Winのsnippets.json格納先

/ユーザー/AppData/Roaming/Sublime Text 2/Packages/Emmet/emmet/snippets.json

Macのsnippets.json格納先

/Library/Application Support/Sublime Text 2/Packages/Emmet/emmet/snippets.json

おまけ

Emmetのアクション一覧

Sublime Text2 でのショートカット一覧になります。カスタマイズされたキーバインドと衝突してしまう可能性もあるため以下から、確認して必要な際はキーバインドの修正をしてください。

項目名	説明	Winコマンド	Macコマンド	デモ
Expand Abbreviation	Emmetの展開コマンド	`Ctrl`+`E` or `Tab`	`Cmd`+`E` or `Tab`	デモ
Match Tag Pair	カーソルのある位置から、囲われているタグの階層を上る。	`Ctrl`+`,`	`Ctrl`+`D`	デモ
Go to Matching Pair	カーソルのあるタグの開始タグ、終了タグに移動	`Ctrl`+`Alt`+`J`	`Ctrl`+`Shift`+`T`	デモ
Wrap with Abbreviation	選択、又はカーソルのある要素に対して、任意のタグで囲む。	`Ctrl`+`Shift`+`G`	`Ctrl`+`W`	デモ
Go to Edit Point	タグ間の編集ポイントへカーソルを移動	`Ctrl`+`Alt`+`→`(進む) `Ctrl`+`Alt`+`←`(戻る)	`Ctrl`+`Alt`+`→`(進む) `Ctrl`+`Alt`+`←`(戻る)	デモ
Select Item	タグの各項目（タグ名、属性など）へ移動する	`Shift` + `Ctrl` + `.`(進む) `Shift` + `Ctrl` + `,`(戻る)	`Shift` + `Cmd` + `.`(進む) `Shift` + `Cmd` + `,`(戻る)	デモ
Toggle Comment	コメントの挿入・取り消し	`Shift` + `Ctrl` + `/`	`Shift` + `Cmd` + `/`	デモ
Split/Join Tag	タグの分割と結合	`Shift` + `Ctrl` + `'`	`Shift` + `Cmd` + `'`	デモ
Remove Tag	カーソルがのっているタグの開始タグと終了タグを削除	`Shift`+`Ctrl`+`;`	`Cmd` + `'`	デモ
Merge Lines	タグ内のテキストをマージ Sublime Text 2のパッケージ内にキー設定がないため、キーバインドに以下を設定 { "keys": ["ここは好きなショートカットを設定"], "args": {"action": "merge_lines"}, "command": "run_emmet_action" }	`Shift` + `Ctrl` + `M`	`Shift` + `Ctrl` + `M`	デモ
Update Image Size	指定画像の高さ・幅を自動反映 *画像へのパスが通っている必要あり	`Ctrl` + `U`	`Shift` + `Ctrl` + `I`	デモ
Evaluate Math Expression	数値の計算	`Shift` + `Ctrl` + `Y`	`Shift` + `Cmd` + `Y`	デモ
Increment/Decrement Number	値の増減	`Ctrl` + `↑`(1増加) `Ctrl` + `↓`(1減少) `Shift` + `Alt`+`↑`(10増加) `Shift` + `Alt`+`↓`(10減少) `Alt`+`↑`(0.増加) `Alt`+`↓`(0.1減少)	`Ctrl` + `↑`(1増加) `Ctrl` + `↓`(1減少) `Cmd` + `Alt`+`↑`(10増加) `Cmd` + `Alt`+`↓`(10減少) `Alt`+`↑`(0.増加) `Alt`+`↓`(0.1減少)	デモ
Reflect CSS Value	類似するプロパティの値を一括指定	`Shift` + `Ctrl` + `R`	`Shift` + `Cmd` + `R`	デモ
Encode/Decode Image to data:URL	画像をBase64にデコード	`Ctrl` + `'`	`Shift` + `Ctrl` + `D`	デモ